<template>
  <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <div @click="sendMessage2()" style="float: left">
        <el-radio-button :label="false">展开</el-radio-button>
      </div>
      <div @click="sendMessage()" style="float: left">
        <el-radio-button :label="true">收起</el-radio-button>
      </div>
    </el-radio-group> -->
  <el-menu
    default-active="1-4-1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    active-text-color="#ffd04b"
    background-color="#304156"
    text-color="#fff"
    :class="asideIndex"
  >
    <el-menu-item>
      <i class="el-icon-menu"></i>
      <span slot="title">若依管理系统</span>
    </el-menu-item>
    <div v-for="value in list" :key="value.id">
      <router-link :to="value.router" slot="title" class="white">
        <el-menu-item :class="value.icon">
          <span slot="title"> {{ value.id }}</span>
        </el-menu-item>
      </router-link>
    </div>
    <el-submenu index="1"> </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "AsideIndex",
  data() {
    return {
      asideIndex: "aside",
      menu: false,

      list: [
        { id: "用户管理", icon: "el-icon-user-solid", router: "/UserManage" },
        { id: "角色管理", icon: "el-icon-s-help", router: "/RoleManage" },
        { id: "菜单管理", icon: "el-icon-s-order", router: "/MenuManage" },
        {
          id: "部门管理",
          icon: "el-icon-s-promotion",
          router: "/DepartmentManage",
        },
        { id: "岗位管理", icon: "el-icon-s-shop ", router: "/UserManage" },
        { id: "字典管理", icon: "el-icon-s-custom", router: "/DictManage" },
        { id: "参数设置", icon: "el-icon-thumb", router: "/ParamsSet" },
        { id: "日志管理", icon: "el-icon-place", router: "/LogManage" },
      ],

      allmenu: [
        {
          id: 1,
          name: "zs",
        },
        {
          id: 2,
          name: "zs",
        },
      ],
      msg: "big",
    };
  },
  props: {
    isCollapse: {
      type: Boolean,
    },
  },
  methods: {
    sendMessage() {
      console.log("向父传值");
      this.$emit("func", this.msg);
      this.msg = "small";
    },
    sendMessage2() {
      console.log("向父传值");
      this.$emit("func2", this.msg);
      this.msg = "big";
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
span {
  color: white;
}
.aside {
  height: 1000px;
}
.white {
  color: white;
  text-decoration: none;
}
</style>